<template>
  <div class="container">
    <el-dialog
      :title="title[titleState]"
      :visible.sync="addUserDialog"
      width="50%"
      center
      @closed="closeCheck"
    >
      <!-- 创建表单 -->

      <el-form
        ref="addCompanysRef"
        :model="addCompanys"
        label-width="120px"
        key="resetForm1"
        :rules="addCompanysRules"
        v-if="isShow"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="addCompanys.shortName"></el-input>
          <el-checkbox v-model="addCompanys.isFamous">是否为名企</el-checkbox>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="addCompanys.company"></el-input>
          <el-link
            href="https://www.tianyancha.com"
            target="_blank"
            :underline="false"
            >https://www.tianyancha.com(在此处可查询所属公司全称及简称)</el-link
          >
        </el-form-item>

        <el-form-item label="城市" prop="province">
          <!-- 选择省份 -->
          <el-select
            v-model="addCompanys.province"
            placeholder="请选择"
            @change="selectPro(addCompanys.province)"
          >
            <el-option v-for="(item, i) in provinces" :key="i" :value="item">
            </el-option>
          </el-select>
          <!-- 选择市 -->
          <el-select v-model="addCompanys.city" placeholder="请选择">
            <el-option v-for="(item, i) in citys" :key="i" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="addCompanys.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="addCompanys.remarks"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 编辑表单 -->
      <el-form
        ref="editFormRef"
        :model="editForm"
        label-width="120px"
        :rules="editFormRules"
        key="resetForm2"
        v-else
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="editForm.shortName"></el-input>
          <el-checkbox v-model="editForm.isFamous">是否为名企</el-checkbox>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="editForm.company"></el-input>
          <el-link
            href="https://www.tianyancha.com"
            target="_blank"
            :underline="false"
            >https://www.tianyancha.com(在此处可查询所属公司全称及简称)</el-link
          >
        </el-form-item>

        <el-form-item label="城市" prop="province">
          <el-select
            v-model="editForm.province"
            placeholder="请选择"
            @change="selectPro(editForm.province)"
          >
            <el-option v-for="(item, i) in provinces" :key="i" :value="item">
            </el-option>
          </el-select>

          <el-select v-model="editForm.city" placeholder="请选择">
            <el-option v-for="(item, i) in citys" :key="i" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="editForm.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="editForm.remarks"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialog = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { provinces, citys } from "@/api/hmmm/citys"; // 引入城市
import { add, update } from "@/api/hmmm/companys"; // 引入增加用户和编辑用户的请求函数
export default {
  name: "aaa",
  props: ["editForm"],
  data() {
    return {
      // 添加公司的表单
      addCompanys: {
        shortName: "", // 企业名称
        isFamous: false, // 是否名企 布尔值
        company: "", // 所属公司
        province: "", //  省份
        city: "", //  市区
        tags: "", // 企业标签
        remarks: "", //  备注
      },
      // 创建表单验证
      addCompanysRules: {
        shortName: [
          { required: true, message: "企业简称不能为空", trigger: "blur" },
        ],
        tags: [{ required: true, message: "请输入标签", trigger: "blur" }],
        province: [{ required: true, message: "请选择省份", trigger: "blur" }],
      },

      // 编辑表单的验证
      editFormRules: {
        shortName: [
          { required: true, message: "企业简称不能为空", trigger: "blur" },
        ],
        tags: [{ required: true, message: "请输入标签", trigger: "blur" }],
        province: [{ required: true, message: "请选择省份", trigger: "blur" }],
      },

      // 省级联选择器的数据
      provinces: [], // 省
      citys: [], // 市

      addUserDialog: false,
      title: {
        add: "创建用户",
        edit: "编辑用户",
      },
      titleState: "",
      isShow: "",
    };
  },
  mounted() {
    this.getProvinces();
  },
  methods: {
    // 获取省的数据
    async getProvinces() {
      this.provinces = await provinces();
    },
    // 当选中一个省市的时候 渲染这个省的下级区域
    selectPro(val) {
      this.getCitys(val);
    },
    // 获取市的数据
    async getCitys(val) {
      this.citys = await citys(val);
      // 当选中省份 默认第一个城市被选中
      this.addCompanys.city = this.citys[0];
    },

    // 在父组件调用这个方法 显示弹框
    open() {
      this.addUserDialog = true;
    },

    // 弹框关闭之前的验证
    closeCheck() {
      if (this.isShow) {
        this.$refs.addCompanysRef.resetFields();
      } else {
        this.$refs.editFormRef.resetFields();
      }
    },

    // 点击创建表单确定按钮 发起添加用户的请求
    addUser() {
      if (this.isShow) {
        // 添加用户
        this.$refs.addCompanysRef.validate(async (vali) => {
          if (!vali) return this.$message.error("*为必填项");
          // 表单预校验成功  发起请求
          const res = await add(this.addCompanys);
          if (res.status !== 200)
            return this.$message.error("添加失败,请稍后再试");

          // 请求成功 刷新页面 关闭页面 提示信息
          this.$message.success("添加成功！");
          this.addUserDialog = false;
          this.$parent.getCompanysList();
          this.addCompanys={
            shortName: "", // 企业名称
            isFamous: false, // 是否名企 布尔值
            company: "", // 所属公司
            province: "", //  省份
            city: "", //  市区
            tags: "", // 企业标签
            remarks: "", //  备注
          }
        });
      } else {
        // 编辑用户
        this.$refs.editFormRef.validate(async (vali) => {
          if (!vali) return this.$message.error("*为必填项");
          const res = await update(this.editForm);
          if (res.status !== 200)
            return this.$message.error("编辑失败,请稍后再试");

          // 请求成功 刷新页面 关闭页面 提示信息
          this.$message.success("编辑成功！");
          this.addUserDialog = false;
          this.$parent.getCompanysList();
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>
